<template>
    <div class="vue-datepicker">
      <h3 style="text-align:center;line-height:50px;border-bottom:1px solid #d2d2d2; margin-bottom:20px;">
        选择入住时间
      </h3>
        <div v-if="true" class="vue-datepicker-wrap">
            <div class="vue-datepicker-header" @click.stop="">
                <span @click.stop="switchMonth(-1)"
                  class="vue-datepicker-header-btn vue-datepicker-header-btn-pre">
                  <img src="@/assets/images/right-icon@2x.png" alt="" width="10" class="rotate180">
                </span>
                <!-- <span @click.stop="selectYear=!selectYear" -->
                <span
                     class="vue-datepicker-header-btn vue-datepicker-header-btn-day">
                    {{select.year}} - {{select.month<10?('0'+select.month):select.month}}
                </span>
                <span @click.stop="switchMonth(1)"
                  class="vue-datepicker-header-btn vue-datepicker-header-btn-next">
                  <img src="@/assets/images/right-icon@2x.png" alt="" width="10">
                </span>
            </div>
            <div class="vue-datepicker-content">
                <table>
                    <thead>
                        <th>日</th>
                        <th>一</th>
                        <th>二</th>
                        <th>三</th>
                        <th>四</th>
                        <th>五</th>
                        <th>六</th>
                    </thead>
                    <tbody>
                        <tr v-for="week of list">
                            <td v-for="weekday of week" @click="pick(weekday)"
                                :class="{
                                    'flag': weekday.flag,
                                    'active': !weekday.flag && weekday.text == current.date
                                         && select.month == current.month && select.year == current.year}">
                                <em>{{weekday.text}}</em>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div v-if="selectYear" class="vue-date-picker-year-panel">
                    <ul ref="year">
                        <li v-for="y of years" @click.stop="pickYear(y)" :class="{'active': y == select.year}">{{y}}</li>
                    </ul>
                    <ul ref="month">
                        <li v-for="(m, $index) of months"
                            @click.stop="pickMonth($index + 1)"
                            :class="{'active': $index + 1 == select.month}">
                            {{m}}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="p10" style="margin-top:50px;">
          <button type="button" name="button" class="blockBtn" @click="sureTime">确定</button>
        </div>
    </div>
</template>
<style lang="scss" src="./calendar.scss"></style>
<script src="./calendar.js"></script>
